import React, { useState, useEffect } from 'react';
import { Form, Button, Select, Tooltip } from 'antd';
// import { renderRoleType } from '@/utils/utils.jsx';
import { queryExpressCompanyList, queryWareHouseList } from '../service';


const { Option } = Select;
// const roleType = renderRoleType();

export default ({ query, handleSearch, handleReset }) => {

  const [form] = Form.useForm();

  //快递公司下拉列表
  const [ companyList, setCompanyList ] = useState([]);

  //仓库下拉列表
  const [ houseList, setHouseList ] = useState([]);

  //获取仓库下拉列表
  const getWareHouseList = async () => {

    // let authorityType = undefined;

    // if (roleType == 'zjf' || roleType == 'erp') {
    //   authorityType = 2; 
    // } else if(roleType == 'daifa') {
    //   authorityType = 2;
    // }

    // const param = {
    //   isDeleted: 0,
    //   type: authorityType,
    // }
    const { success, data } = await queryWareHouseList();
    if (success) {
      setHouseList(data);
    }
  }

  //获取快递公司下拉列表
  const getExpressList = async () => {

    const { success, data } = await queryExpressCompanyList();

    if (success) {
      setCompanyList(data);
    }
  }

  //初始化数据请求
  useEffect(() => {
    getWareHouseList();
    getExpressList();
  }, [])

  //初始化数据请求
  useEffect(() => {
    form.resetFields();
  }, [query])


  // 点击查询按钮
  const onFinish = (val) => {
    handleSearch(val);
  }

  const onReset = () => {
    handleReset();
  };


  //快递公司下拉option
  const expressListOptions = companyList.map(d => (
    <Option key={d.id} value={d.id} label={d.name}>
      <Tooltip title={d.name}>{d.name}</Tooltip>
    </Option>
  ));
  
  //仓库下拉option
  const houseListOptions = houseList.map(d => (
    <Option key={d.id} value={d.id} label={d.warehouseName}>
      <Tooltip title={d.warehouseName}>
        {d.warehouseName}
      </Tooltip>
    </Option>
  ));

  return (
    <Form
      form={form}
      layout='horizontal'
      name='express-config-search'
      onFinish={onFinish}
      className='search-form-style'
      initialValues={{...query}}
    >
      <Form.Item label="仓库" name="warehouseId">
        <Select
          showSearch
          placeholder="全部"
          optionFilterProp='label'
          allowClear
          style={{ width: 170 }}
        >
          {houseListOptions}
        </Select>
      </Form.Item>
      <Form.Item label="快递公司" name="expressId">
        <Select
          showSearch
          placeholder="全部"
          optionFilterProp='label'
          allowClear
        >
          {expressListOptions}
        </Select>
      </Form.Item>
      <Form.Item label="是否启用" name="status">
          <Select placeholder='全部' allowClear>
            <Option value={1}>是</Option>
            <Option value={2}>否</Option>
          </Select>
        </Form.Item>
      <Form.Item>
        <Button type='primary' htmlType='submit' style={{ marginRight: 8 }}>查询</Button>
        <Button onClick={onReset}>重置</Button>
      </Form.Item>
    </Form>
  );
};